<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>跟踪详情 - 管道清理</title>
	<!--[if lt IE 9]><script src="${resourcePath}js/comm/css3-mediaqueries.js"></script><![endif]-->
    <%--<link rel="stylesheet" type="text/css" href="${resourcePath}css/guandaoqingli/pig.css">--%>
    <link rel="stylesheet" type="text/css" href="${resourcePath}tags/swiper/idangerous.swiper.css">
    <script type="text/javascript" src="${resourcePath}tags/superswiper/jquery.SuperSlide.2.1.1.js"></script>
    <script src="${resourcePath}tags/uploadjs/upload.js" type="text/javascript" ></script>
	<script src="${resourcePath}tags/uploadjs/jquery.form.js" type="text/javascript"></script>
	<script src="${resourcePath}tags/uploadjs/layer/layer.min.js"></script>

    <style>
    	.qg-info .info-conts .prev{
    		background: url(${resourcePath}images/pig/1left.png) no-repeat center center;
    	}
    	.qg-info .info-conts .next{
    		background: url(${resourcePath}images/pig/2ringht.png) no-repeat center center;
    	}
    	.look_00{
    		margin-left: -13px;
		    display: inline-block;
		    width: 28px;
		    height: 28px;
		    vertical-align: middle;
		    background: url("${resourcePath}images/guandaoqingli/gz-rw-ls/photo.png") no-repeat center center;
    	}
    	.look_00:hover{
    		border-radius: 80px;
    		background: url("${resourcePath}images/guandaoqingli/gz-rw-ls/photo-active.png") no-repeat center center;
    	}
    </style>
</head>
<body class="body-pad" style="padding-bottom:100px">
	<input type="hidden" id="pagePath" value="${pagePath}"/>
    <input type="hidden" id="resourcePath" value="${resourcePath}"/>
    <input type="hidden" id="gisResourcePath" value="${gisResourcePath}"/>
    <input type="hidden" value="${taskId }" id="taskId"/>
    
    <!-- 收发球筒信息 -->
	<input type="hidden" id="frompiginfo" value=""/>
	<input type="hidden" id="topiginfo" value=""/>
	
	<!-- 管道管段 -->
	<input type="hidden" id="lineName" value=""/>
	<input type="hidden" id="segmentName" value=""/>
	
    <div>
        <div class="html-header" style="background-color:white;padding-top:0">
            <p class="header-title" style="margin-top:0"><em class="icon-gzgl1"></em> <a href="gengzongguanli.html" style="color:#646464">跟踪管理</a> <i style="color:#787878;"> > 查看</i></p>
            <%--<a href="javascript:void(0)" onclick="backToList();" class="btn btn-w100 btn-back-icon btn-h30 back"><em></em><span>返回上一级</span></a>--%>
            <%--<script>--%>
                <%--function backToList(){--%>
                    <%--window.location.href = $("#pagePath").val() + "/cleanTask/cleanPipeLineTrack/getCleanPipeLineTrackIndex.html";--%>
                <%--}--%>
            <%--</script>--%>
        </div>
        <div class="container-fluid warp insp-container">
        <div class="row-fluid  bg-white1">
            <div class="tab-map" style="float:left;margin-left:1.8%;margin-top:10px;z-index: 100">
                <ul  style="float:left">
                    <li onclick="LoadInitDetail();" class="active">详情</li>
                    <li onclick="loadGisDetail();" class="">GIS地图</li>
                </ul>
            </div>
            <div class="main clearFix">








<div class="cxtj clearFix" style="margin-top:10px">


        <div class="fu">
                <div class="left tab01 gz-tab">
                    <div class="l-r clearFix pad20" id="clertBaseInfo" style="border: none">
                        <div class="qg-top">
                            <div class="fi0"></div>
                            <div class="fi1">
                                <p class="p0">任务名称</p>
                                <p class="p1" id="taskName"></p>
                                <em></em>
                            </div>
                            <div class="fi1 ma25">
                                <p class="p0">管道名称</p>
                                <p class="p1" id="linesName"></p>
                                <em></em>
                            </div>
                            <div class="fi1 ma25">
                                <p class="p0">清管类型</p>
                                <p class="p1" id="pigType"></p>
                            </div>
                        </div>
                        <div class="swiper" style="border:none;margin-bottom:20px;margin-top:10px;">
                            <div class="ss" style="margin-left:-49.5%" id="aa">
                                <ul>

                                </ul>
                            </div>
                        </div>
                        <div class="qg-info clearFix" id="fromAndToPig">
                            <div class="info-conts faqiudian" >
                                <p class="p-top" ><span>发球点详情</span></p>
                                <div class="fc clearFix">
                                    <ul class="u-info">
                                        <li>
                                            <span class="s1">发球点</span>
                                            <span class="s2" id="fromValRoom"></span>
                                        </li>
                                        <li>
                                            <span class="s1">绝对距离(m)</span>
                                            <span class="s2" id="fromMile"></span>
                                        </li>
                                        <li>
                                            <span class="s1">最近测试桩</span>
                                            <span class="s2" id="fromreference"></span>
                                        </li>
                                        <li class="no-r">
                                            <span class="s1">最近测试桩距离(m)</span>
                                            <span class="s2" id="fromreferencedistance"></span>
                                        </li>
                                        <li>
                                            <span class="s1">发球时间</span>
                                            <span class="s2" id="sendBallsTime"></span>
                                        </li>
                                        <li>
                                            <span class="s1">发球人</span>
                                            <span class="s2" id="sendRecrder"></span>
                                        </li>
                                        <li>
                                            <span class="s1">发球时发球站出站压力(MPa)</span>
                                            <span class="s2" id="sendBallsPressureFrom"></span>
                                        </li>

                                        <li class="no-r">
                                            <span class="s1">发球时收球站进站压力(MPa)</span>
                                            <span class="s2" id="sendBallsPressureTo"></span>
                                        </li>
                                        <li>
                                            <span class="s1">发球时流量</span>
                                            <span class="s2" id="sendBallsFlow"></span>
                                        </li>
                                        <li>
                                            <span class="s1">管道内径(mm)</span>
                                            <span class="s2" id="interDiameter"></span>
                                        </li>
                                        <li>
                                            <span class="s1">清管类型</span>
                                            <span class="s2" id="piggingType"></span>
                                        </li>


                                        <li class="no-r">
                                            <span class="s1">清管工具</span>
                                            <span class="s2" id="cleanTool"></span>
                                            <%-- <c:if test="${empty result.pigType }">
                                                <span class="s2" >${result.detectorType }</span>
                                            </c:if>
                                            <c:if test="${not empty result.pigType }">
                                                <span class="s2" >${result.pigType }</span>
                                            </c:if> --%>
                                        </li>
                                        <li>
                                            <span class="s1">发球压差(Mpa)</span>
                                            <span class="s2" id="sendPressure"></span>
                                        </li>
                                        <li>
                                            <span class="s1">过盈量(%)</span>
                                            <span class="s2" id="sendInterference"></span>
                                        </li>
                                    </ul>
                                    <div class="img-lb">
                                        <span class="title" style="margin-top:20px">发球照片</span>
                                        <div class="lb" style="margin-left:60px;margin-top:-35px">
                                            <div class="swiper-container runner">
                                                <div class="swiper-wrapper" id="sendBallImage">

                                                </div>
                                                <div class="pagin"></div>
                                                <a href="javascript:void(0);" class="prev"></a>
                                                <a href="javascript:void(0);" class="next"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="qg-text" >
                                        <textarea rows="" cols="" readonly="readonly" placeholder="" id="sendRemark"></textarea>
                                    </p>
                                </div>

                            </div>
                            <div id="pointDetailDiv">

                            </div>
                            <div class="info-conts shouqiudian none">
                                <p class="p-top"><span>收球点详情</span></p>
                                <div class="fc clearFix">
                                    <ul class="clearFix u-info">
                                    <li>
                                        <span class="s1">收球点</span>
                                        <span class="s2" id="toValRoom"></span>
                                    </li>
                                    <li>
                                        <span class="s1">绝对距离(m)</span>
                                        <span class="s2" id="toMile"></span>
                                    </li>
                                    <li>
                                        <span class="s1">最近测试桩</span>
                                        <span class="s2" id="toreference"></span>
                                    </li>
                                    <li class="no-r">
                                        <span class="s1">最近测试桩距离(m)</span>
                                        <span class="s2" id="fromreferencedistance"></span>
                                    </li>
                                    <li>
                                        <span class="s1">收球时间</span>
                                        <span class="s2" id="backBallsTime"></span>
                                    </li>
                                    <li>
                                        <span class="s1">收球人</span>
                                        <span class="s2" id="recrder"></span>
                                    </li>
                                    <li>
                                        <span class="s1">收球时发球站出站压力(MPa)</span>
                                        <span class="s2" id="theBallsPressureFrom"></span>
                                    </li>
                                    <li class="no-r">
                                        <span class="s1">收球时收球站进站压力(MPa)</span>
                                        <span class="s2" id="theBallsPressureTo"></span>
                                    </li>
                                    <li>
                                        <span class="s1">收球时流量</span>
                                        <span class="s2" id="theBallsFlow"></span>
                                    </li>
                                    <li>
                                        <span class="s1">清管器工具平均速度(m/s)</span>
                                        <span class="s2" id="avgRate"></span>
                                    </li>
                                    <li>
                                        <span class="s1">最大推球压差(Mpa)</span>
                                        <span class="s2" id="maxPushPressure"></span>
                                    </li>
                                    <li class="no-r">
                                        <span class="s1">污水(Kg)</span>
                                        <span class="s2" id="sewage"></span>
                                    </li>
                                    <li>
                                        <span class="s1">污物(Kg)</span>
                                        <span class="s2" id="dirt"></span>
                                    </li>
                                </ul>
                                    <div class="img-lb" style="width:47.6%">
                                    <span class="title">清出物照片</span>
                                    <div class="lb2">
                                        <div class="swiper-container runner2">
                                            <div class="swiper-wrapper" id="ballbackImage">

                                            </div>
                                            <div class="pagin"></div>
                                            <a href="javascript:void(0);" class="prev2"></a>
                                            <a href="javascript:void(0);" class="next2"></a>
                                        </div>
                                    </div>
                                </div>
                                    <p class="qg-text">
                                        <span class="title">收球点描述</span>
                                        <textarea rows="" cols="" readonly="readonly" placeholder="" id="backRemark"></textarea>
                                    </p>
                                 </div>
                                 <div class="ffk"></div>
                                    <%-- <div class="p-top1">
                                        <span class="s01">清管效果 <i>${result.pigginGeffict }</i><em></em></span>
                                    </div> --%>
                                    <div class="qgxg u-info none">
                                        <div class="fc clearFix">
                                            <ul class="clearFix">
                                        <li>
                                            <span class="s1">清放空气量(10⁴m³)</span>
                                            <span class="s2" id="ventGasVolume"></span>
                                        </li>
                                        <li>
                                            <span class="s1" >管道实际通过气量(10⁴m³)</span>
                                            <span class="s2" id="actualPassGasVolume"></span>
                                        </li>
                                        <li>
                                            <span class="s1">天然气相对密度(kg/m³)</span>
                                            <span class="s2" id="gasRelativedEnsity"></span>
                                        </li>
                                        <li class="no-r">
                                            <span class="s1">天然气平均温度(℃)</span>
                                            <span class="s2" id="avgTempreture"></span>
                                        </li>
                                        <li>
                                            <span class="s1">清管器运行距离(m)</span>
                                            <span class="s2" id="pigRunLength"></span>
                                        </li>
                                        <li>
                                            <span class="s1">在平均压力下的压缩系数</span>
                                            <span class="s2" id="compressionCoefficient"></span>
                                        </li>
                                        <li>
                                            <span class="s1">记录人</span>
                                            <span class="s2" id="reRecrder"></span>
                                        </li>
                                        <li class="no-r">
                                            <span class="s1">记录时间</span>
                                            <span class="s2" id="recordtime"></span>
                                        </li>
                                        <li>
                                            <span class="s1">清管效率</span>
                                            <span class="s2" id="pigginGefficiency"></span>
                                        </li>
                                    </ul>
                                        </div>
                                   </div>
                            </div>
                        </div>
                        <!-- 导入、导出 -->
                        <div class="qg-btn" id="leading_in_out">

                        </div>
                        <!-- 跟踪点列表 -->
                        <div class="left" id="piont">
                            <div class="info-header clearFix" id="pointData">

                            </div>
                        </div>
                    </div>
                    </div>

                <div class="gz-tab none">
                        <div class="l-r clearFix pad20" style="border:none">
                            <div class="fu" style="margin-top:30px">
                                <div class="left tab01" style="position:relative">
                                    <span class="over-pro c-o" id="progress"></span>
                                    <div class="swiper">
                                        <div class="ss" style="margin-left: -49.5%;" id="bb">
                                            <ul>

                                            </ul>
                                        </div>
                                    </div>
                                    <div class="map1" id="mapDiv" >

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
</div>

            </div>
      </div>
        </div>
<!--导入-->
<div id="dr" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 800px; height: 500px; margin-left: -400px; top: 15%; display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">导入跟踪记录</h3>
    </div>
    <div class="modal-body" style="height:350px">
        <!-- 导入成功-->
  <%--       <div class="none">
            <div class="dr-succc">
                <div class="first"><img src="${resourcePath}images/pig/excel.png" alt=""></div>
                <div class="second">跟踪记录</div>
                <div class="third"><img src="${resourcePath}images/pig/wjj.png" alt=""><span>960.36KB</span></div>
                <div class="jdt">
                    <span class="go"></span>
                    <span class="value">100%</span>
                </div>
            </div>
            <div class="dr-list">
                <ul>
                    <li><em class="ok"></em><span>导入跟踪记录成功！</span></li>
                </ul>
            </div>
        </div> --%>
        <!-- 导入失败-->
        <div>
            <div class="dr-succc">
                <div class="first"><img src="${resourcePath}images/pig/excel.png" alt=""></div>
                <div class="second">跟踪记录</div>
                <div class="third"><img src="${resourcePath}images/pig/wjj.png" alt=""><span>0KB</span></div>
                <div class="jdt">
                    <span class="go"></span>
                    <span class="value">100%</span>
                </div>
                <em class="cl"></em>
            </div>
            <div class="dr-list">
                <ul>
                    <!-- <li><em class="no"></em><span>数据导入失败！共<i>10</i>处错误,下载 <a href="">错误表格</a></span></li> -->
                	<li><em class="no"></em><span>请点击左上EXCEL图标导入文件</span></li>
                </ul>
                <!-- <p class="error-info">错误详情</p> -->
                <div class="no-info">
                    <!-- <p>X行X列导入失败，错误代码 ERROR_002。</p>
                    <p>X行X列导入失败，错误代码 ERROR_002。</p>
                    <p>X行X列导入失败，错误代码 ERROR_002。</p> -->
                </div>

            </div>
        </div>
    </div>
    <div class="modal-footer" style="text-align:center">
        <a href="javascript:;"class="btn btn-w100 btn-print-icon btn-h30" style="text-align:center;text-indent:0" onclick="closeWindow();">确认</a>
    </div>
</div>
<div id="viewImg" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:80%;height: 70%">
	<%@include file= "/WEB-INF/pages/pig/viewImg.jsp" %>
</div>
<div id="pigview" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:400px;height: 400px;margin-left: -3px;">
	<img style="width:400px;height: 400px;" />
</div>

<form id="exportForm" action="${pageContext.request.contextPath}/pig/cleanPipeLineTrack/exportTrackPoint.json" style="display: none;" method="post">
    <input type="text" name="taskId"/>
</form>
<script src="${resourcePath}js/pigg.js"></script>
<script type="text/javascript" src="${resourcePath}tags/swiper/idangerous.swiper.min.js"></script>
<script src="${pageContext.request.contextPath}/js/basedata/pipe/loadGis.js"></script>
<script src="${pageContext.request.contextPath}/js/pig/trackDetail.js"></script>
<script type="text/javascript">
    $(function(){
        var runner = new Swiper('.runner',{grabCursor:!0,calculateHeight:!0,slidesPerView:6});
        $('.prev').on('click', function(e){e.preventDefault();runner.swipePrev()});
        $('.next').on('click', function(e){e.preventDefault();runner.swipeNext()});
    })
    $(function(){
        $('.p-top1 span').on('click',function(){
            var _this=$(this).find('em')
            if(_this.hasClass('active')){
                _this.removeClass('active')
                $('.qgxg').addClass('none')
            }else{
                _this.addClass('active')
                $('.qgxg').removeClass('none')
            }
        })
        $('.start').live('click',function(){
            $('.faqiudian').removeClass('none');
            $('.genzongdian').addClass('none');
            $('.shouqiudian').addClass('none');
        })
       /*  $('.sl').on('click',function(){
            $('.faqiudian').addClass('none')
            $('.genzongdian').removeClass('none');
            $('.shouqiudian').addClass('none')
        }) */
        $('.end').live('click',function(){
            $('.faqiudian').addClass('none')
            $('.genzongdian').addClass('none')
            $('.shouqiudian').removeClass('none');
        })
        
        /* var titleObj = $(".qg-info").find("li");
        for(var i=0;i< titleObj.length;i++){
        	var tohtml = titleObj.eq(i).children().eq(1);
        	var titleVal = tohtml.html();
        	if("" != titleVal && null != titleVal && 'undefined' != titleVal){
        		tohtml.attr('title',titleVal.trim());
        	}
        } */
    })
    
    function closeWindow(){
    	$("#dr").modal("hide");
    }
    
    $('.tab-map li').each(function(i){
        $(this).on('click',function(){
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
            $('.main .gz-tab').eq(i).removeClass('none')
            $('.main .gz-tab').eq(i).siblings().addClass('none')
        })
    })
    
    
        /**
     *
     * @param num 测试桩个数
     */
	function swiperWidth(num)
	{
	    var dg=172;//点到点的宽度
	    var dd=36;//非起始点宽度
	    var qz=52;//起点 终端宽度
	
	    var width=100;
	    width+=(num-1)*dg;
	    width+=(num-2)*dd;
	    width+=2*qz;
	
	    $(".ss").css("width",width);
	
	}
	$(function(){
	    $(".swiper").css("width",$(".qg-top").width());
	    //swiperWidth($("#aa .sl").length+2);
	    //swiperWidth($("#bb .sl").length+2);
	})
    
    
</script>
    </div>

</body>
\
</html>